import type { PropType } from 'vue'
import type { ExtractProps } from '@/utils/type'
import { useNamespace } from '@/utils'

export namespace variables {
  export const ns = useNamespace('Progress')
}
export namespace ProgressNS {
  export const name = variables.ns.name
  export const props = {
    /**
     * 进度
     */
    percentage: Number,
    /**
     * 如果不想传递 percentage，则需要传递 current 和 total 两个属性
     * 
     * 这两个属性的计算方式 current / total * 100 = percentage
     */
    current: {
      type: Number,
      default: 0
    },
    total: {
      type: Number,
      default: 0
    },
    /**
     * 是否显示文本
     * @默认 true
     */
    showText: {
      type: Boolean,
      default: true
    },
    /**
     * 是否显示百分比进度文本
     */
    showPercentageText: {
      type: Boolean,
      default: true
    },
    /**
     * 进度的百分比精度，默认保留所有小数位
     */
    precision: Number,
    /**
     * 文本位置
     * @example
     *  x —— current 和 total 在进度条的左右两侧，当 showPercentage = true时，那么此选项无效
     *  top —— 在进度条的上面
     *  bottom —— 在进度条的下面
     *  center —— 在进度条的内部居中
     * @默认 center
     */
    textPosition: {
      type: String as PropType<'top' | 'center' | 'bottom' | 'x'>,
      default: 'center'
    },
    /** 
     * 是否显示条纹
     */
    striped: Boolean,
    /** 
     * 是否让条纹动起来
     */
    stripedFlow: Boolean,
  }
  export type Props = ExtractProps.Types<typeof props>
  export const Component = <{
    new(): {
      $props: Props
    }
  }>{}
}